<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>组件中的带scope的slot</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../style.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <div id="app">
        <p>带scope的组件：红字来自父组件定义，黑字来自子组件定义</p>
        <child-component>
            <template scope="props">
                <p style="color: #ff0000;">来自父组件的内容</p>
                <p>{{ props.msg }}</p>
            </template>
        </child-component>

        <hr>

        <p>组件：子组件用父组件的数据v-for循环</p>
        <my-list :books="books">
            <template slot="book" scope="props">
                <li class="main parent">{{ props.bookName }}</li>
            </template>
        </my-list>

        <hr>

        <p>组件：用$slots访问插槽</p>
        <my-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多正文内容</p>
            <div slot="footer">底部信息</div>
        </my-component>
    </div>


    <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
    <script src="" async defer></script>

    <script>
        Vue.component('child-component', {
            template: '\
                    <div class="component container">\
                        <slot msg="来自子组件的内容"></slot>\
                    </div>\
                '
        })

        Vue.component('my-list', {
            props: {
                books: {
                    type: Array,
                    default: function () {
                        return []
                    }
                }
            },
            template: '\
                    <ul class="component">\
                        <slot name="book" v-for="book in books" :book-name="book.name">\
                        </slot>\
                    </ul>\
                '
        })

        Vue.component('my-component', {
            template: '\
                <div class="component">\
                     <div class="header">\
                        <slot name="header"></slot>\
                     </div>\
                     <div class="main">\
                        <slot></slot>\
                     </div>\
                     <div class="footer">\
                        <slot name="footer"></slot>\
                     </div>\
                </div>\
            ',
            mounted() {
                var header = this.$slots.header
                var main = this.$slots.default
                var footer = this.$slots.footer
                console.log(header)
                console.log(header[0].elm.innerHTML)
                console.log(main)
                console.log(main[1].elm.innerHTML)
                console.log(footer)
                console.log(footer[0].elm.innerHTML)
            },
        })

        var app = new Vue({
            el: '#app',
            data: {
                books: [{
                        name: '《Vue.js 实战》'
                    },
                    {
                        name: '《JavaScript 语言精粹》'
                    },
                    {
                        name: '《JavaScript 高级程序设计》'
                    }
                ]
            }
        })
    </script>
</body>

</html>